<template>
	<div class="charge-container">
		<template>
			<el-table :data="vipProductList"
				v-loading="loading"
				border
				style="width: 100%">
				<el-table-column align="center"
					label="产品图片"
					prop="imageUrl"
					width="130">
					<!-- 插槽作用域 -->
					<template v-slot="{row}">
						<el-avatar shape="square"
							:size="80"
							fit="scale-down"
							:src="row.imageUrl"></el-avatar>
					</template>
				</el-table-column>
				<el-table-column prop="productName"
					align="center"
					label="产品名称">
				</el-table-column>
				<el-table-column prop="description"
					align="center"
					label="产品描述">
				</el-table-column>
				<el-table-column prop="price"
					align="center"
					label="价格(元)">
				</el-table-column>
				<el-table-column prop="inventory"
					align="center"
					label="库存">
				</el-table-column>
				<el-table-column label="操作"
					align="center">
					<template v-slot="{row}">
						<el-button type="primary"
							v-isBuy="row.inventory"
							@click="pre_order(row)"
							icon="iconfont icon-vip3">充值</el-button>
					</template>
				</el-table-column>
			</el-table>
		</template>
	</div>
</template>
<script>
	import * as payApi from "@/api/pay";
	export default {
		//自定义指令
		directives: {
			isBuy: {
				//库存为0要禁用按钮
				inserted(el, binding) {
					// console.log(el, binding);

					if (binding.value == 0) {
						//库存如果是0
						//给元素加上 is-disabled类名
						//保存元素之前的类名
						let oldClassName = el.className;
						el.className = oldClassName + " is-disabled"; //视觉上的禁用 elmemt-ui中的样式
						el.disabled = true; //真正的禁用按钮
					}
				},
			},
		},
		meta: {
			title: "vipCharge",
			icon: "iconfont icon-chongzhi", //存菜单对应的图标的类名
		},
		methods: {
			pre_order(row) {
				//获得当前这一行的product_id 产品id
				console.log(row);
				// this.$confirm  提示

				this.$confirm("您正在充值" + row.description, "购买提示", {
					type: "info",
				})
					.then(() => {
						//点击了确定按钮

						//1.要把当前的产品对象存到vuex,定义的字段,currentProduct
						this.$store.commit("SET_CURRENT_PRODUCT", row);
						//2.跳转到下单页面,preorder
						this.$router.push({name:'preorder'})
					})
					.catch(() => {
						//点击了取消按钮
						this.$message.warning("已取消购买");
					});
			},
		},
		async created() {
			//打开加载动画
			this.loading = true;
			//发起请求,获取vip商品
			let res = await payApi.getVipProduct();
			this.loading = false; //关闭加载动画
			console.log(res);
			this.vipProductList = res.data.data;
		},
		data() {
			return {
				loading: true,
				vipProductList: [],
			};
		},
	};
</script>
<style scoped lang="less">
.el-avatar {
	/deep/ img {
		width: 100%;
	}
	height: 30px !important;
	background-color: #fff;
}
.el-button--primary {
	background-color: #05a000;
}
</style>
